<template>
    <div id="bottomBar">
        <div class="container">
            <nav>
                <ul>
                    <router-link
                        class="speech"
                        :to="`/${item.routerName}`"
                        v-for="item in navOptions"
                        :key="item.routerName"
                    />
                </ul>
            </nav>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 本页面的计时器
            interval: null,

            navOptions: [{
                label: '用药提醒',
                icon: 'alarm',
                routerName: 'medicineClockView',
            }, {
                label: '立刻知药',
                icon: 'search',
                routerName: 'searchView',
            }, {
                label: '备忘录',
                icon: 'notes',
                routerName: 'notesView',
            }],
        }
    },

    mounted() {
        const setAsActiveTab = (tab, nav) => {
            try {
                if (tab.className.split(/\s+/).indexOf("selected") !== -1) return
                let listElements = Array.from(document.querySelectorAll('#bottomBar li'))
                // 渲染样式
                listElements.forEach((li, index) => {
                    if (li.className.split(/\s+/).indexOf("selected") !== -1) {
                        li.className = 'remove'
                        setTimeout(() => {
                            li.className = ''
                        }, 1000)
                    }
                    li.innerHTML = `<i class="material-icons">${this.navOptions[index].icon}</i>`
                })
                tab.className = 'selected ' + nav.icon
                tab.innerHTML = `<i class="material-icons">${nav.icon}</i><span style="white-space: nowrap">${nav.label}</span>`
            } catch (error) {
                console.log(error)
            }
        }

        const a = document.querySelectorAll('#bottomBar nav > ul > a')
        this.navOptions.forEach((nav, index) => {
            let li = document.createElement('li')
            li.innerHTML = `<i class="material-icons">${nav.icon}</i>`
            // 切换路由的事件
            li.addEventListener('click', function () {
                setAsActiveTab(this, nav)
            })
            a[index].appendChild(li)
        })

        // 根据路由跳转渲染指定按钮样式
        let listElements = Array.from(document.querySelectorAll('#bottomBar li'))
        let activeLi = null
        let activeLiIndex = null
        this.interval = setInterval(() => {
            activeLi = document.querySelector('#bottomBar .router-link-exact-active li')
            if (!(activeLi && listElements.includes(activeLi))) return
            activeLiIndex = listElements.indexOf(activeLi)
            if (activeLiIndex >= this.navOptions.length) return
            setAsActiveTab(activeLi, this.navOptions[activeLiIndex])
        }, 500)
    },

    beforeDestroy() {
        if (this.interval) {
            clearInterval(this.interval)
        }
    }
}
</script>

<style lang="less">
#bottomBar {
    @font-face {
        font-family: 'Material Icons';
        font-style: normal;
        font-weight: 400;
        src: url(@/assets/fonts/BottomBar/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
    }

    .material-icons {
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
    }

    /* cyrillic-ext */
    @font-face {
        font-family: 'Nunito';
        font-style: normal;
        font-weight: 400;
        src: url(@/assets/fonts/BottomBar/XRXV3I6Li01BKofIOOaBXso.woff2) format('woff2');
        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    /* cyrillic */
    @font-face {
        font-family: 'Nunito';
        font-style: normal;
        font-weight: 400;
        src: url(@/assets/fonts/BottomBar/XRXV3I6Li01BKofIMeaBXso.woff2) format('woff2');
        unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* vietnamese */
    @font-face {
        font-family: 'Nunito';
        font-style: normal;
        font-weight: 400;
        src: url(@/assets/fonts/BottomBar/XRXV3I6Li01BKofIOuaBXso.woff2) format('woff2');
        unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
    }
    /* latin-ext */
    @font-face {
        font-family: 'Nunito';
        font-style: normal;
        font-weight: 400;
        src: url(@/assets/fonts/BottomBar/XRXV3I6Li01BKofIO-aBXso.woff2) format('woff2');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
        font-family: 'Nunito';
        font-style: normal;
        font-weight: 400;
        src: url(@/assets/fonts/BottomBar/XRXV3I6Li01BKofINeaB.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* cyrillic-ext */
    @font-face {
        font-family: 'Nunito';
        font-style: normal;
        font-weight: 700;
        src: url(@/assets/fonts/BottomBar/XRXV3I6Li01BKofIOOaBXso.woff2) format('woff2');
        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    /* cyrillic */
    @font-face {
        font-family: 'Nunito';
        font-style: normal;
        font-weight: 700;
        src: url(@/assets/fonts/BottomBar/XRXV3I6Li01BKofIMeaBXso.woff2) format('woff2');
        unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* vietnamese */
    @font-face {
        font-family: 'Nunito';
        font-style: normal;
        font-weight: 700;
        src: url(@/assets/fonts/BottomBar/XRXV3I6Li01BKofIOuaBXso.woff2) format('woff2');
        unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
    }
    /* latin-ext */
    @font-face {
        font-family: 'Nunito';
        font-style: normal;
        font-weight: 700;
        src: url(@/assets/fonts/BottomBar/XRXV3I6Li01BKofIO-aBXso.woff2) format('woff2');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
        font-family: 'Nunito';
        font-style: normal;
        font-weight: 700;
        src: url(@/assets/fonts/BottomBar/XRXV3I6Li01BKofINeaB.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    position: fixed;
    bottom: 0;

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    a {
        text-decoration: none;
        outline: none;
    }

    .container {
        width: 100vw;
        height: 12vh;
    }

    nav, ul {
        width: 100%;
    }

    .container * {
        height: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .container nav {
        background: #fff;
        box-shadow: 1px 10px 50px rgba(0, 0, 0, 0.2);
    }

    .container ul {
        padding: 15px 0;
        justify-content: space-around;
    }

    .container nav ul li {
        list-style: none;
        font-weight: 700;
        cursor: pointer;
        font-size: 20px;
        color: var(--color);
        width: 20vw;
    }

    .material-icons {
        font-size: 25px;
    }

    .container nav ul li.selected {
        width: 45vw;
        border-radius: 40px;
        animation: slide-in 800ms forwards;
        padding: 15px;
    }

    .container nav ul li.selected > span {
        opacity: 0;
        -webkit-animation: fade-in 300ms forwards;
        animation: fade-in 300ms forwards;
        -webkit-animation-delay: 200ms;
        animation-delay: 200ms;
        transform: translateX(50%);
    }

    .container nav ul li.selected.alarm {
        background-color: rgba(var(--colorR), var(--colorG), var(--colorB), 0.3);
    }

    .container nav ul li.selected.alarm > span,
    .container nav ul li.selected.alarm i {
        color: var(--color);
    }

    .container nav ul li.selected.search {
        background-color: rgba(var(--colorR), var(--colorG), var(--colorB), 0.3);
    }

    .container nav ul li.selected.search > span,
    .container nav ul li.selected.search i {
        color: var(--color);
    }

    .container nav ul li.selected.notes {
        background-color: rgba(var(--colorR), var(--colorG), var(--colorB), 0.3);
    }

    .container nav ul li.selected.notes > span,
    .container nav ul li.selected.notes i {
        color: var(--color);
    }

    .container nav ul li.remove i {
        animation: i-out 800ms forwards;
    }

    .container nav ul li.remove > span {
        -webkit-animation: fade-out 800ms forwards;
        animation: fade-out 800ms forwards;
        -webkit-animation-delay: 200ms;
        animation-delay: 200ms;
        transform: translateX(50%);
    }

    @-webkit-keyframes slide-in {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes slide-in {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @-webkit-keyframes i-out {
        0% {
            transform: translateX(-100%);
        }
    }
    @keyframes i-out {
        0% {
            transform: translateX(-100%);
        }
    }

    @-webkit-keyframes fade-in {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
    @keyframes fade-in {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
    @-webkit-keyframes fade-out {
        0% {
            transform: translateX(0);
            opacity: 1;
        }
        100% {
            transform: translateX(50%);
        }
    }
    @keyframes fade-out {
        0% {
            transform: translateX(0);
            opacity: 1;
        }
        100% {
            transform: translateX(50%);
        }
    }
}
</style>